const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = (env, argv) => {
  const devMode = argv.mode !== 'production';
  return {
    entry: [
      "babel-polyfill",
      path.join(__dirname, './src/main.js')
    ],
    devServer: {
      contentBase: path.join(__dirname, "public"),
      compress: true, // 是否压缩
      port: 9000, // 启动端口
      hot: true, // 热更新
      open: true // 是否自动打开浏览器
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.css$/,
          use: [
            devMode ? 'style-loader': MiniCssExtractPlugin,
            'css-loader',
            'postcss-loader'
          ]
        },
        {
          test: /\.html$/,
          use: [{
            loader: "html-loader",
            options: {
              minimize: true
            }
          }]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [{
            loader: "file-loader",
            options: {}
          }]
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {}
          }
        },
        {
          test: /\.scss$/,
          use: [
            devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'sass-loader'
          ]
        }
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      new HtmlwebpackPlugin({
        filename: 'index.html', // 生成的文件夹名
        template: 'public/index.html', // 模板html
        favicon: 'public/favicon.ico', // 标题图标
      }),
      new CleanWebpackPlugin(),
      new VueLoaderPlugin()
    ]
  }
}
